<template>
  <!-- 目录 -->
  <div class="container">
    <!-- 卡片视图区域 -->
    <el-card class="card_body">
      <!-- 头部区域 -->
      <div class="btn_wrapper">
        <el-form>
          <el-row>
            <el-col :span="6">
              <el-form-item label="目录名称" label-width="70px">
                <el-input v-model="queryInfo.directoryName"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="状态" label-width="70px" prop="state">
                <el-select placeholder="请选择" v-model="queryInfo.state">
                  <el-option
                    v-for="(item, index) in status"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="20px">
                <el-button size="small" @click="clear">清除</el-button>
                <el-button type="primary" size="small" @click="getDirectoryList"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align:right">
            <!-- <el-form-item  class="backSubject">
            </el-form-item> -->
               <!-- <el-link type="primary" @click="subjectBack">
               <i class="el-icon-back"></i>
               返回学科
              </el-link>
              &nbsp; &nbsp; &nbsp; -->
              <el-button
                v-show="queryInfo.subjectID"
                type="text"
                icon="el-icon-back"
                @click="$router.back()"
              >返回学科</el-button>
               <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="dialogVisible = true"
                >新增目录</el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>

      <!-- 提示数据条数 -->
      <el-alert
        v-if="total !== 0"
        :title="`共 ${total} 条记录`"
        type="info"
        :closable="false"
        show-icon
      ></el-alert>

      <!-- 数据列表 -->
      <el-table :data="directorylist" style="width: 100%">
        <el-table-column type="index" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科">
          <template slot-scope="scope">{{ scope.row.subjectName }}</template>
        </el-table-column>
        <el-table-column prop=" directoryName" label="目录名称">
          <template slot-scope="scope">{{ scope.row.directoryName }}</template>
        </el-table-column>
        <el-table-column prop="username" label="创建者">
          <template slot-scope="scope">{{ scope.row.username }}</template>
        </el-table-column>
        <el-table-column label="创建日期" width="180">
          <template slot-scope="scope">{{
            scope.row.addDate | parseTimeByString
          }}</template>
        </el-table-column>
        <el-table-column prop="totals" label="面试题数量">
          <template slot-scope="scope">{{ scope.row.totals }}</template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">
            {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handle(scope.row)">
              {{ scope.row.state === 1 ? '启动' : '禁用' }}
            </el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 0"
              @click="editDirectory(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 0"
              @click="removeUser(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="queryInfo.pagesize"
        layout="prev,pager, next, sizes,jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
    <!-- 新增目录弹框 -->
    <el-dialog title="新增目录" :visible.sync="dialogVisible" width="30%">
      <!-- 表单组件 -->
      <directorys-add
        v-if="dialogVisible"
        @close="dialogVisible = false"
        @addDirectory="getDirectoryList"
      />
    </el-dialog>
    <!-- 修改目录弹框 -->
    <el-dialog title="修改目录" :visible.sync="editDialogVisible" width="30%">
      <!-- 表单组件 -->
      <directorys-add
        v-if="editDialogVisible"
        :editQuery="editQuery"
        @close="editDialogVisible = false"
        @updateDirectory="getDirectoryList"
      />
    </el-dialog>
  </div>
</template>

<script>
import { list, remove } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
import DirectorysAdd from '../components/directorys-add'

export default {
  name: '',
  components: {
    DirectorysAdd
  },
  props: ['id'],
  data() {
    return {
      ruleForm: {},
      // 查询条件
      queryInfo: {
        query: '',
        page: 1,
        pagesize: 10,
        state: null,
        directoryName: '',
        subjectID: parseInt(this.$route.query.id)
      },
      status: '',
      total: 0,
      directorylist: [], // 数据列表
      showClose: false, // 启用 禁用
      dialogVisible: false, //  添加弹框显示隐藏
      editDialogVisible: false, //  修改弹框显示隐藏
      // 点击修改按钮需要传递的数据
      editQuery: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getDirectoryList()
  },
  mounted() {},
  methods: {
    // 获取数据
    async getDirectoryList() {
      const { data } = await list(this.queryInfo)
      this.directorylist = data.items
      // console.log(data)
      this.queryInfo.page = parseInt(data.page)
      this.queryInfo.pagesize = parseInt(data.pagesize)
      this.total = data.counts
      this.status = status
    },
    // 每页几条数据
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getDirectoryList()
    },
    // 分多少页
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage
      this.getDirectoryList()
    },
    handle(row) {
      // 启用 禁用
      row.state === 0 ? (row.state = 1) : (row.state = 0)
      this.$message({
        showClose: true,
        message: '操作成功',
        type: 'success'
      })
    },
    // 清除
    clear() {
      this.queryInfo.directoryName = ''
      this.queryInfo.state = null
      this.getDirectoryList() //  重新渲染数据
    },
    // 删除
    removeUser(data) {
      this.$confirm('此操作将永久删除用户 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove(data)
            .then(response => {
              this.$message.success('成功删除了用户!')
              this.directorylist.splice(data, 1)
              this.getDirectoryList()
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 编辑按钮事件
    editDirectory(row) {
      this.editDialogVisible = true
      this.editQuery = row
    },
    subjectBack() {
      this.$router.back()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.card_body {
  margin: 10px;
}
.el-pagination {
  margin-top: 20px;
  margin-left: 680px;
}
</style>
